<script>
import {ElMessage} from "element-plus";
import {Delete, Edit, Plus, Star} from "@element-plus/icons-vue";
export default {
  computed: {
    Delete() {
      return Delete
    },
    Edit() {
      return Edit
    }
  },
  components: {Star, Plus},
  data(){
    return{
      formLabelWidth:'100px',
      key:'',
      keyPath:[],
      updateform:{},  //存放要更新的个人信息
      updateproduct:{
        address:'',
        category_id:'',
        user_id:'',
        goods_name:'',
        goods_description:'',
        goods_image:'',
        goods_id:'',
        goods_price:'',
        goods_stock:'',
      }, //存放要更新的商品信息
      userInfo: {
        user_id:'',
        user_name: '',
        gender:'',
        birthday:'',
        phone: '',
        email: '',
        address:'',
        selfintro:''
      },
      editProfileDialogVisible: false,
      editProductDialogVisible:false,
      myProducts: [],  //存储我发布的所有商品信息
      singleproduct:[],   //存储要修改的那一条商品信息
      MyCredit:[],    //存储我的信誉信息
      userData:[],     //存储当前用户信息
      categoryData:[]   //存储商品类别信息
    }
  },
  methods:{
    cancelEvent(){},
    handleChange(){},
    EditProduct(Id){
      this.$http.get("http://localhost:8080/goods/productdetail",{params:{
        id:Id
        }}).then((res)=>{
        this.singleproduct=res.data
        console.log(this.singleproduct)
        this.updateproduct=this.singleproduct[0]
        this.editProductDialogVisible=true
      }).catch(function(err){
        console.log(err);
      })
    },
    DeleteProduct(Id){
      this.$http.get("http://localhost:8080/goods/delproduct/"+Id).then((res)=>{
        console.log(res.data);
        if(res.data===1){
          console.log("删除成功！");
          ElMessage({
            message:'删除成功！',
            type:'success',
          })
          this.LoadProductData()
        }
        else{
          ElMessage({
            message:'删除失败！',
            type:'warning',
          })
          console.log("删除失败！");
        }
      }).catch(function(err){
        console.log(err);
      })
    },
    btnUpdateproduct(){
      this.$http.post("http://localhost:8080/goods/updateproduct",this.updateproduct).then((res)=>{
        if(res.data===1){
          console.log("修改成功！");
          ElMessage({
            message:'修改成功！',
            type:'success'
          })
          this.LoadProductData();
          this.updateproduct={}
          this.editProductDialogVisible=false
        }else{
          ElMessage({
            message:'修改失败！',
            type:'success',
          })
          console.log("修改失败！");
        }
      }).catch(function(err){
        console.log(err);
      })
    },
    handleSuccessUpdate(respond){
      console.log(respond);
      this.updateform.user_image=respond
    },
    handleSuccess(response) {
      // 上传图片成功后的回调
      console.log(response);
      this.updateproduct.goods_image=response
    },
    btnUpdate(){
      if (this.updateform.gender === '男') {
        this.updateform.gender = 0;
      } else if (this.updateform.gender === '女') {
        this.updateform.gender = 1;
      }
      this.$http.post("http://localhost:8080/user/updateuserinfo",this.updateform).then((res)=>{
        if(res.data===1){
          console.log("修改成功！");
          ElMessage({
            message:'修改成功！',
            type:'success'
          })
          this.LoadUserData();
          this.updateform={}
          this.editProfileDialogVisible=false
        }else{
          ElMessage({
            message:'修改失败！',
            type:'success',
          })
          console.log("修改失败！");
        }
      }).catch(function(err){
        console.log(err);
      })
    },
    LoadUserData(){
      this.userInfo.user_id=localStorage.getItem('user_id')
      console.log(this.userInfo.user_id)
      this.$http.get("http://localhost:8080/user/showdetailuserinfo",{params:{
          user_id:this.userInfo.user_id
        }}).then((res)=>{
        this.userInfo=res.data
        console.log(this.userInfo)
        if (this.userInfo.gender === 0) {
            this.userInfo.gender = '男';
        } else if (this.userInfo.gender === 1) {
            this.userInfo.gender = '女';
         }
      }).catch(function(err){
        console.log(err);
      })
    },
    LoadCategoryData(){
      this.$http.get("http://localhost:8080/category/all").then((res)=>{
        this.categoryData = res.data
        console.log(this.categoryData);
      }).catch(function(err){
        console.log(err);
      })
    },
    LoadProductData(){
      this.userInfo.user_id=localStorage.getItem('user_id')
      console.log(this.userInfo.user_id)
      this.$http.get("http://localhost:8080/goods/published",{params:{
          user_id:this.userInfo.user_id
        }}).then((res)=>{
        this.myProducts=res.data
        console.log(this.myProducts)
      }).catch(function(err){
        console.log(err);
      })
    },
    LoadCreditDate(){
      this.$http.get("http://localhost:8080/comment/getcredit",{params:{
        user_id:this.userInfo.user_id
        }}).then((res)=>{
          this.MyCredit=res.data
        console.log(this.MyCredit)
      }).catch(function(err){
        console.log(err);
      })
    },
    showEditProfileDialog(userInfo) {
      console.log(userInfo);
      this.updateform = userInfo;
      this.editProfileDialogVisible = true;
    },
    handleOpen (key,keyPath){
      console.log(key, keyPath)
    },
    handleClose (key,keyPath){
      console.log(key, keyPath)
    }
  },
  mounted(){
    this.LoadUserData();
    this.LoadCategoryData();
    this.LoadProductData();
    this.LoadCreditDate();
  }
}
</script>
<template>
  <el-row class="tac">
    <el-col :span="4">
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>我的订单</span>
          </template>
          <router-link to="/AwaitingShipment" class="no-underline"><el-menu-item index="1-1">待发货</el-menu-item></router-link>
          <router-link to="/AwaitingPayment" class="no-underline"><el-menu-item index="1-2">待付款</el-menu-item></router-link>
          <router-link to="/RoadingShipment" class="no-underline"><el-menu-item index="1-3">在途中</el-menu-item></router-link>
          <router-link to="/FinishingShipment" class="no-underline"><el-menu-item index="1-4">已完成</el-menu-item></router-link>
          <router-link to="/AllOrders" class="no-underline"><el-menu-item index="1-5">全部订单</el-menu-item></router-link>
        </el-sub-menu>
        <router-link to="/Collection" class="no-underline">
          <el-menu-item index="2">
            <el-icon><setting /></el-icon>
            <span>我的收藏</span>
          </el-menu-item></router-link>
        <router-link to="/BrowseRecord" class="no-underline">
        <el-menu-item index="3">
          <el-icon><setting /></el-icon>
          <span>浏览记录</span>
        </el-menu-item></router-link>
      </el-menu>
    </el-col>
    <el-col :span="20">
      <div>

        <!-- 个人信息展示 -->
        <el-card>
          <div slot="header" class="clearfix">
            <span>个人主页</span><br/><br/>
            <el-avatar :size="120" :src="'http://localhost:8080/image/upload/'+userInfo.user_image"></el-avatar>
          </div>
          <br/>
          <div v-for="credit in MyCredit" :key="credit.user_id" class="info-container">
            <p>我的信誉等级：<el-icon><Star /></el-icon>{{credit.status}}<el-icon><Star /></el-icon></p>
          </div>
          <div class="info-container">
            <p>用户昵称：{{ userInfo.user_name }}</p>
            <p>性别：{{userInfo.gender}}</p>
            <p>生日：{{userInfo.birthday}}</p>
            <p>手机号：{{ userInfo.phone }}</p>
            <p>邮箱：{{ userInfo.email }}</p>
            <p>地址：{{userInfo.address}}</p>
            <p>自我描述：{{userInfo.selfintro}}</p>
          </div>
          <el-button size="small" type="primary" @click="showEditProfileDialog(userInfo)" class="info-button">修改个人资料</el-button>
        </el-card>

        <!-- 我发布的商品列表 -->
        <el-card>
          <div slot="header" class="clearfix">
            <span>我已发布的商品</span><br/><br/>
          </div>
          <div class="product-list">
          <div v-for="product in myProducts" :key="product.goods_id" class="product-item">
            <img :src="'http://localhost:8080/image/upload/'+product.goods_image" alt="商品图片" style="width: 200px; height:200px;">
            <br/>
            <div class="product-info">
            <p>名称：{{ product.goods_name }}</p>
            <p>价格：￥{{ product.goods_price }}</p>
            </div>
                <el-button type="primary" :icon="Edit" circle @click="EditProduct(product.goods_id)"/>
                <el-popconfirm confirm-button-text="是"
                               cancel-button-text="否"
                               icon-color="#c45656"
                               title="确定删除吗?"
                               @confirm="DeleteProduct(product.goods_id)"
                               @cancel="cancelEvent">
                  <template #reference>
                    <el-button type="danger" :icon="Delete" circle/>
                  </template>
                </el-popconfirm>
          </div>
          </div>
        </el-card>

        <!-- 修改已发布的商品的信息对话框 -->
        <el-dialog v-model="editProductDialogVisible" center>
          <div class="card-title">
            <span>修改商品信息</span>
          </div>
          <br/><br/>
          <el-form :model="updateproduct" width="500px">
            <el-form-item label="商品ID：" :label-width="formLabelWidth">
              <el-input v-model="updateproduct.goods_id" autocomplete="off" disabled/>
            </el-form-item>
            <el-form-item label="商品名称：" :label-width="formLabelWidth">
              <el-input v-model="updateproduct.goods_name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="商品类别：" :label-width="formLabelWidth">
            <el-select v-model="updateproduct.category_id" placeholder="请选择商品类别" clearable>
              <el-option
                  v-for="item in categoryData"
                  :key="item.category_id"
                  :label="item.category_name"
                  :value="item.category_id"
              />
            </el-select>
            </el-form-item>
            <el-form-item label="商品描述（文字）：" :label-width="formLabelWidth">
              <el-input
                  v-model="updateproduct.goods_description"
                  type="textarea"
                  maxlength="150"
                  :rows="5"
                  show-word-limit
                  placeholder="--限150字内--"
                  clearable/>
            </el-form-item>
            <el-form-item label="商品描述（图片）：" :label-width="formLabelWidth">
              <el-upload
                  list-type="picture-card"
                  action="http://localhost:8080/goods/upload"
                  :show-file-list="false"
                  :on-success="handleSuccess"
              >
                <img v-if="updateproduct.goods_image" :src="'http://localhost:8080/image/upload/'+updateproduct.goods_image" class="avatar"  alt=""/>
                <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="商品价格：" :label-width="formLabelWidth">
              <el-input v-model="updateproduct.goods_price" autocomplete="off" />
            </el-form-item>
            <el-form-item label="商品数量：" :label-width="formLabelWidth">
              <el-input-number v-model="updateproduct.goods_stock" :min="1" :max="10" @change="handleChange"/>
            </el-form-item>
            <el-form-item label="发货地址：" :label-width="formLabelWidth">
            <el-input v-model="userInfo.address" disabled/>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button default @click="editProductDialogVisible = false">取消</el-button>
              <el-button default type="primary" @click="btnUpdateproduct">
                修改
              </el-button>
            </div>
          </template>
        </el-dialog>

        <!-- 修改个人资料对话框 -->
        <el-dialog v-model="editProfileDialogVisible" center>
          <div class="card-title">
            <span>修改个人资料</span>
          </div>
          <br/><br/>
          <el-form :model="updateform" width="500px">
            <el-form-item label="用户昵称：" :label-width="formLabelWidth">
              <el-input v-model="updateform.user_name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="用户密码" :label-width="formLabelWidth">
              <el-input type="password" v-model="updateform.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="用户头像:" :label-width="formLabelWidth">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8080/user/upload"
                  :show-file-list="false"
                  :on-success="handleSuccessUpdate"
              >
                <img v-if="updateform.user_image" :src="'http://localhost:8080/image/upload/'+updateform.user_image" alt="用户头像" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="性别：" :label-width="formLabelWidth">
              <el-radio-group v-model="updateform.gender">
                <el-radio value="男">男</el-radio>
                <el-radio value="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生日：" :label-width="formLabelWidth">
                  <el-date-picker
                      v-model="updateform.birthday"
                      type="date"
                      placeholder="--请选择日期--"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                  />
            </el-form-item>
            <el-form-item label="手机号：" :label-width="formLabelWidth">
              <el-input v-model="updateform.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱：" :label-width="formLabelWidth">
              <el-input v-model="updateform.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="地址：" :label-width="formLabelWidth">
              <el-input v-model="updateform.address" autocomplete="off" />
            </el-form-item>
            <el-form-item label="自我描述：" :label-width="formLabelWidth">
              <el-input
                  v-model="updateform.selfintro"
                  type="textarea"
                  maxlength="150"
                  show-word-limit
                  placeholder="--限150字内--"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button default @click="editProfileDialogVisible = false">取消</el-button>
              <el-button default type="primary" @click="btnUpdate">
                修改
              </el-button>
            </div>
          </template>
        </el-dialog>

      </div>
    </el-col>
  </el-row>
</template>

<style>
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 100px;
}
.product-item {
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
}
.product-info {
  margin-top: 10px;
}
.card-title {
  text-align: center; /* 将标题文本居中对齐 */
  font-weight: bold;
  font-size: 15px;
}
.info-container {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.clearfix{
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.info-button {
  float: right;
  margin-left: 10px;
}
.avatar-uploader{
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 150px;
  height: 150px;
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}
.avatar-uploader-icon {
  color: #5880b4;
  width: 80px;
  height: 80px;
  text-align: center;
}
.avatar {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>